<script setup>
import { reactive, ref } from 'vue'
import card from './card/card.vue';
import message from "./content/message.vue"
import box from "./content/box.vue"

defineProps({
  msg: String,
})

const obj = reactive({
  
})

const count = ref(0)
</script>

<template>
  
  <div class="fight-Area">
    
    <!-- 左侧的信息栏 -->
    <message class="message"></message>

    <!-- 右侧的信息栏 -->
    <box class="right"></box>

  </div>

</template>

<style scoped>
.fight-Area {
  border: solid 1px #000000;
  padding: 12px;
  width:100%;
  height:100%;
  box-sizing: border-box;
  zoom: 0.1;
  position: relative;
}

.message {
  position: absolute;
  width: 30%;
  border: solid 1px #000000;
  height: 100%;
}

.right {
  position: absolute;
  width: 70%;
  right: 0;
  border: solid 1px #000000;
  height: 100%;
}
</style>
